<template>
  <div class="dy-box">
    <div class="content-box">
      <!-- 动态卡片头部 -->
      <div class="header">
        <van-row type="flex" justify="space-between">
          <van-col span="6"
            ><img :src="this.userimage" alt="" width="40px" @click="userPage"
          /></van-col>
          <van-col span="6"
            ><label for="">{{ this.username }}</label></van-col
          >
          <van-col span="6">
            <label for="" class="time">{{ this.time }}</label></van-col
          >
        </van-row>
      </div>
      <!-- 动态卡片内容部分 -->
      <div class="content-part" @click="detail">
        {{ this.content }}
        <br />
        <div class="yuan" v-show="this.forward_dy_id">
          <label for="" class="yuanheader">@{{ this.yuanDy.username }}</label
          ><br />
          <label for="" class="yuancontent">{{ this.yuanDy.content }}</label>
          <div v-show="isShow">
            <van-button type="primary" size="small">小型按钮</van-button>
          </div>
        </div>
      </div>
      <van-divider />
      <div class="footer">
        <!-- 每个元素的两侧间隔相等 -->
        <van-row type="flex" justify="space-around">
          <van-col span="6" @click="forward"
            >转发<van-icon name="share" />{{ this.forwarded }}</van-col
          >
          <van-col span="6" @click="toComment"
            >评论<van-icon name="chat"
          /></van-col>
          <van-col span="6" @click="toGood"
            >点赞{{ this.good }}<img :src="this.goodSrc" alt="" width="15px"
          /></van-col>
        </van-row>
      </div>
    </div>
    <!-- 自定义折叠内容：评论 -->
    <div v-show="isShowComment">
      <div v-show="isShowInput">
        <van-field
          v-model="commentContent"
          rows="2"
          autosize
          label="评论"
          type="textarea"
          maxlength="50"
          placeholder="请输入评论"
          show-word-limit
        />
        <van-button type="primary" size="small" @click="submitComment"
          >发布</van-button
        >
      </div>
      <div v-for="item in commentList" :key="item.index">
        <div class="commentcard">
          <!-- {{item}} -->
          <div class="time">
            {{
              (Date.now() - item.comment_time) / 60000 > 60
                ? Math.floor((Date.now() - item.comment_time) / 3600000) +
                  "小时"
                : Math.floor((Date.now() - item.comment_time) / 60000) + "分钟"
            }}之前发布了这条信息
          </div>
          <div class="commentWord">{{ item.comment_content }}</div>
          <van-divider />
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-nav-bar
        title="转发动态"
        left-text=""
        right-text="立即转发"
        left-arrow
        @click-left="onCilickLeft"
        @click-right="onClickRight"
      />
      <van-field
        v-model="forwardInfo.message"
        rows="2"
        autosize
        label="转发"
        type="textarea"
        placeholder="说点什么吧"
      />
      <van-cell value="取消" @click="cancel"></van-cell>
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { Toast } from "vant";
export default {
  props: [
    "userimage",
    "username",
    "content",
    "time",
    "dy_id",
    "forwarded",
    "forward_dy_id",
    "good",
    "isShow",
  ],
  name: "dycard",
  data() {
    return {
      show: false,
      forwardInfo: {
        message: "",
        username: sessionStorage.getItem("username"),
        time: Date.now(),
        dy_id: this.dy_id,
      },
      yuanDy: {
        username: "",
        content: "",
      },
      goodSrc: "http://47.100.42.191/images/goodBefore.png",
      isShowComment: false,
      commentList: [],
      commentContent: "",
      isShowInput: true,
    };
  },
  created() {
    this.getYuan();
  },
  methods: {
    forward() {
      // this.$router.push({name:'writeDy'})
      this.show = true;
    },
    toGood() {
      // alert("点赞");
      axios
        .get("http://localhost:8888/dynamic/good?dy_id=" + this.dy_id)
        .then((res) => {
          console.log(res);
        });
      this.goodSrc = "http://47.100.42.191/images/goodAfter.png";
    },
    async onClickRight() {
      // alert(1)
      let data = qs.stringify(this.forwardInfo);
      // alert(1)
      // console.log(data);
      await axios
        .get("http://localhost:8888/dynamic/forward?" + data)
        .then((res) => {
          console.log(res);
        });
      this.forwardInfo.message = "";
      this.show = false;
      await this.getAll();
    },
    onCilickLeft() {
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    detail() {
      this.$router.push({ name: "detail", params: { dy_id: this.dy_id } });
    },
    getAll() {
      axios.get("http://localhost:8888/dynamic/findAll").then((res) => {
        this.dyInfo = res.data;
        // console.log(this.dyInfo);
      });
    },
    getYuan() {
      if (this.forward_dy_id) {
        axios
          .get(
            "http://localhost:8888/dynamic/findOne?dy_id=" + this.forward_dy_id
          )
          .then((res) => {
            console.log(res.data.user_name);
            this.yuanDy.username = res.data.user_name;
            this.yuanDy.content = res.data.content;
          });
      }
    },
    userPage() {
      this.$router.push({
        name: "PersonPage",
        params: { username: this.username },
      });
    },
    toComment() {
      if (this.isShowComment === false) {
        this.isShowComment = !this.isShowComment;
        axios
          .get(`http://localhost:8888/dynamic/findComment?dy_id=${this.dy_id}`)
          .then((res) => {
            // console.log(res)
            this.commentList = res.data;

            for (var item of res.data) {
              axios
                .get(
                  `http://localhost:8888/user/findById?user_id=${item.user_id}`
                )
                .then((res) => {
                  console.log(res);
                  // this.a = res.data[0];
                  Object.defineProperty(item, "user_name", {
                    value: res.data[0].user_name,
                    enumerable: true,
                    configurable: true,
                  });
                  Object.defineProperty(item, "user_face", {
                    value: res.data[0].user_face,
                    enumerable: true,
                    configurable: true,
                  });
                  // this.itemObj = JSON.parse(item)
                });
            }
          });
      } else {
        this.isShowComment = !this.isShowComment;
      }
    },
    submitComment() {
      if (this.commentContent) {
        axios
          .post(
            "http://localhost:8888/comment/submit",
            qs.stringify({
              content: this.commentContent,
              username: sessionStorage.getItem("username"),
              dy_id: this.dy_id,
            })
          )
          .then((res) => {
            console.log(res);
          });
        this.toComment();
        this.isShowInput = false;
        // this.isShowComment = !this.isShowComment;
      } else {
        Toast("请输入内容");
      }
    },
  },
};
</script>

<style lang="less">
.dy-box {
  margin: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  box-shadow: 2px 2px 5px #b3afaf;
  background-color: #fff;
}
.header,
.content-part,
.footer {
  padding-bottom: 10px;
  // border:1px solid #333;
  // box-shadow: 2px 2px 5px #a8a6a6;
}
.footer {
  box-shadow: 2px 2px 5px #a8a6a6;
  padding-top: 10px;
}
.content-part {
  font-size: 13px;
  line-height: 1.5rem;
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
.time {
  font-size: 12px;
}
.header {
  padding-top: 10px;
}
.van-cell__value--alone {
  // font-size: 10px;
  text-align: center !important;
}
.yuan {
  // border: 1px solid #333;
  background-color: #f5f5f5;
  font-size: 13px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 9px;
  margin-top: 15px;
  margin-bottom: 10px;
}
.yuanheader,
.yuancontent {
  padding-top: 10px;
  padding-bottom: 10px;
  display: inline-block;
}
.yuanheader {
  color: blue;
}
.commentcard {
  width: 100%;
  box-shadow: 2px 2px 5px #a8a6a6;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
}
.time {
  font-size: 12px;
  color: rgb(90, 88, 88);
  margin: 10px;
}
.commentWord {
  font-size: 14px;
}
</style>
